﻿@model FollowPeers.Models.Event

@{
    ViewBag.Title = "AddEvent";
}

@{
    FollowPeers.Models.FollowPeersDBEntities followPeersDB = new FollowPeers.Models.FollowPeersDBEntities();
    string name = Membership.GetUser().UserName;
    FollowPeers.Models.UserProfile myprofile = followPeersDB.UserProfiles.SingleOrDefault(p => p.UserName == name);
}

@Html.Partial("_Header")
@Html.Partial("_SideBar1")

<div class="grid_9">
    <div class="box">
        <h2 style="height: 20px"> Add Event </h2>
        <hr />
        @using (Html.BeginForm())
        {
            @Html.ValidationSummary(true)
             
            <!DOCTYPE html>  
            <head>
            <title>Event Calendar</title>
            <link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
            <link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet" type="text/css" />
            <link href="@Url.Content("~/css/datepicker.css")" rel="stylesheet" type="text/css" />
            <link type="text/css" href="css/bootstrap-timepicker.min.css" rel="stylesheet" />
            <link href="css/datepicker.less" rel="stylesheet" type="text/css" />
            <link href="@Url.Content("~/css/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
            <script src="@Url.Content("~/js/jquery-1.8.2.min.js")" type="text/javascript"></script>
            <script src="js/bootstrap-datepicker.js" ></script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
            </head>
            
            <body>
            <fieldset>
                    <table style="margin:5px 0px 5px 0px">
                        <tr>
                            <td>
                                <table>
                                    <tr>
                                        <div class="editor-label">
                                            @Html.Label("Invite Friends")
                                        </div>
                                        <div class="editor-field" id ="EventInviteeList">
                                            <input type="text" id="Invites" name="Invites" style="width:210px" />
                                        </div>
                                        <div class="editor-label">
                                            @Html.Label("Event Date")
                                        </div>
                                        <input id="EventDate" class="small" type="date" name ="EventDate" value= "01/05/2011" data-datepicker="datepicker">
                                        <div class="editor-label">
                                            @Html.Label("Event Time")
                                        </div>
                                        <input id="EventTime" class="small" type="time" name ="EventTime" data-datepicker="timepicker">
                                    </tr>
                                    <tr>
                                        @using (Html.BeginForm()) 
                                        {
                                            @Html.ValidationSummary(true)
                                            <fieldset>

                                                <div class="editor-label">
                                                    @Html.LabelFor(model => model.EventName, "Event Name")
                                                </div>
                                                <div class="editor-field">
                                                    @Html.EditorFor(model => model.EventName)
                                                    @Html.ValidationMessageFor(model => model.EventName)
                                                </div>
                                                <div class="editor-label">
                                                    @Html.LabelFor(model => model.EventLocation, "Event Location")
                                                </div>
                                                <div class="editor-field">
                                                    @Html.EditorFor(model => model.EventLocation)
                                                    @Html.ValidationMessageFor(model => model.EventLocation)
                                                </div>

                                                <div class="editor-label">
                                                    @Html.LabelFor(model => model.EventDesc, "What's The Event About")
                                                </div>
                                                <div class="editor-field">
                                                    @Html.EditorFor(model => model.EventDesc)
                                                    @Html.ValidationMessageFor(model => model.EventDesc)
                                                </div>

                                                <p>
                                                    <input type="submit" value="Add" style="float: left; padding: 3px 8px;" class="btn btn-primary" />
                                                </p>
                                            </fieldset>
                                        }
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
            </fieldset>  
            <script src="@Url.Content("~/js/bootstrap.min.js")"></script>

            </body>
                    
        }


    </div>
</div>

@Html.Partial("_Footer")

<script type="text/javascript">
    $(document).ready(function () {
        if ($('#EventInviteeList').length) { AutoComplete(); }
        function AutoComplete() {

            $("#Invites").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: "/Event/FindInviteeNames",
                        data: { searchText: extractLast(request.term), maxResults: 10 },
                        dataType: "json",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.name, value: item.name, id: item.value }
                            }))
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                },
                focus: function () {
                    // prevent value inserted on focus
                    return false;
                },
                select: function (event, ui) {
                    var terms = split(this.value);
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push(ui.item.value);
                    // add placeholder to get the comma-and-space at the end
                    terms.push("");
                    this.value = terms.join(", ");
                    $('#EventInviteeList').append("<input type='hidden' id='Invites" + ui.item.id + "' name='InvitesId'  />");
                    $('#Invites' + ui.item.id).val(ui.item.id);
                    return false;
                }
            });
            $("#Invites").bind("keydown", function (event) {
                if (event.keyCode === $.ui.keyCode.TAB &&
                $(this).data("autocomplete").menu.active) {
                    event.preventDefault();
                }
            })
            function split(val) {
                return val.split(/,\s*/);
            }
            function extractLast(term) {
                return split(term).pop();
            }

        }
    });
</script>




